<template>
  <el-form class="form" :model="formData" @submit.prevent="$emit('search')">
    <!-- 第一行 -->
    <el-row class="form-row">
      <el-col :span="6">
        <el-form-item label="家庭">
          <el-select
            size="default"
            v-model="localFormData.familyId"
            placeholder="请选择家庭编号"
            default-first-option
            @change="$emit('update:formData',localFormData)"
          >
            <el-option v-for="f in familyList" :key="f.id" :label="f.name" :value="f.id"
                       @click="handleFamilyClick(f.id)"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="10">
        <el-form-item label="标签">
          <el-select
            placeholder="请选择标签"
            v-model="localFormData.tagIds"
            multiple
            clearable
            :multiple-limit="3"
            :loading="loading"
            @change="$emit('update:formData',localFormData)"
          >
            <el-option v-for="tag in tagList"
                       :key="tag.id"
                       :label="tag.name"
                       :value="tag.id"/>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="收支类型">
          <el-select
            placeholder="请选择收支类型"
            v-model="localFormData.incomeExpenseType"
            default-first-option
            @change="$emit('update:formData',localFormData)"
          >
            <el-option v-for="type in incomeExpenseTypes" :key="type.code" :label="type.desc"
                       :value="type.code"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="2">
        <el-form-item>
          <el-button class="search-btn" type="primary" icon="el-Search" @click="search">
            查询
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行 -->
    <el-row class="form-row">
      <el-col :span="6">
        <el-form-item label="来源">
          <el-select
            placeholder="请选择来源类型"
            v-model="localFormData.sourceType"
            @change="$emit('update:formData',localFormData)"
          >
            <el-option v-for="type in sourceTypes" :key="type.code" :label="type.desc"
                       :value="type.code"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="10">
        <el-form-item label="创建时间">
          <el-date-picker
            class="data-picker"
            v-model="dateRange"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
            prefix-icon="el-Calendar"
            :disabledDate="disabledFutureDate"
            @change="$emit('update:formData',localFormData)"
          />
        </el-form-item>
      </el-col>

      <el-col :span="6">
        <el-form-item label="家庭成员">
          <el-select
            v-model="localFormData.familyMemberId"
            placeholder="请选择家庭成员"
            @change="$emit('update:formData',localFormData)"
          >
            <el-option v-for="m in memberList" :key="m.id" :label="m.name"
                       :value="m.id"></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col :span="2">
        <el-form-item>
          <el-button class="reset-btn" type="default" icon="el-RefreshLeft" @click="$emit('reset')">
            重置
          </el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script setup lang="ts">
import {ref, watch} from 'vue';
import type {
  Family,
  FamilyMember,
  Dictionary,
  SelectForm,
  Tag
} from "@/api/detail/type.ts";
import {ElMessage} from "element-plus";

const props = defineProps<{
  formData: SelectForm;
  familyList: Family[];
  tagList: Tag[];
  memberList: FamilyMember[];
  loading: boolean;
  sourceTypes: Dictionary[];
  incomeExpenseTypes: Dictionary[];
}>();

const localFormData = ref<SelectForm>(props.formData);


const emit = defineEmits(['search', 'reset', 'get-members', 'update:formData', 'get-tags']);

const dateRange = ref<string[]>([]);

const disabledFutureDate = (time: Date) => {
  return time.getTime() > Date.now();
};

/**
 * 家庭选择框点击事件
 * @param familyId
 */
function handleFamilyClick(familyId: number) {
  //清空标签和家庭成员选择框中的数据
  localFormData.value.tagIds = [];
  localFormData.value.familyMemberId = null;
  emit("get-members", familyId);
  emit("get-tags", familyId);
}

/**
 *  搜索按钮点击事件
 */
function search() {
  if (!localFormData.value.familyId) {
    ElMessage.warning("家庭不可为空")
    return
  }
  emit('search');
}

// 添加对 dateRange 的 watch
watch(dateRange, (newVal) => {
  if (newVal && newVal.length === 2) {
    localFormData.value.startTime = newVal[0];
    localFormData.value.endTime = newVal[1];
    // emit('update:formData', localFormData.value);
  } else {
    localFormData.value.startTime = null;
    localFormData.value.endTime = null;
    // emit('update:formData', localFormData.value);
  }
});
</script>


<style scoped lang="scss">
.form {
  width: 100%;
  flex-shrink: 0;
  padding: 20px;
  box-sizing: border-box;
  background-color: $base-card-bg-color;
  border: 1px solid var(--el-border-color-light);
  border-radius: 12px;
  margin-bottom: 20px;

  .form-row {
    margin-bottom: 20px;

    .el-col {
      padding: 0 10px;
    }
  }

  :deep(.el-select) {
    width: 100%;
  }

  .data-picker {
    width: 100%;
  }

  /* 其他样式保持不变 */
  .title {
    font-size: 16px;
    font-weight: bold;
    color: $base-color-text-primary;
  }

  .search-btn {
    font-size: 14px;
    width: 80px;
    height: 30px;
    background-color: #3370ff;
  }

  .reset-btn {
    font-size: 14px;
    width: 80px;
    height: 30px;
    background-color: $base-sys-bg-color;
    color: $base-color-text-primary;
  }

  /* 输入框底色 */
  :deep(.el-input__wrapper) {
    --el-input-bg-color: #f7f8fa;
  }

  :deep(.el-form-item__label) {
    color: $base-color-text-primary;
  }

  /* 选择框底色 */
  :deep(.el-select__wrapper) {
    background-color: #f7f8fa;
  }

  /* 标签选择器 */
  :deep(.el-tag--info) {
    --el-tag-bg-color: #3370ff;
    --el-tag-text-color: #fff;
  }
}
</style>
